import { Component } from 'react';
import { Button, Card, Form, Input, Checkbox } from 'antd';
import logo from '../../assets/logo.png';
import './index.css';
export default class Login extends Component {
  render() {
    return (
      <div className="login">
        <Card className="login-container">
          <img className="login-logo" src={logo} alt="" />
          {/* 表单 */}
          <Form size="large">
            <Form.Item
              name="mobile"
              rules={[
                { required: true, message: 'Please Input Tel Number' },
                { pattern: /^1[3-9]\d{9}$/, message: '手机号码格式错误' },
              ]}
            >
              <Input placeholder="Please Input Tel Num . . ." />
            </Form.Item>

            <Form.Item
              name="code"
              rules={[
                { required: true, message: 'Please Input Verification Code' },
                { pattern: /^\d{6}$/, message: '验证码格式错误' },
              ]}
            >
              <Input placeholder="Please Input Veri Code . . ." />
            </Form.Item>

            <Form.Item
              name="agree"
              valuePropName="checked"
              rules={[
                {
                  validator: (_, value) =>
                    value === true
                      ? Promise.resolve()
                      : Promise.reject(
                          new Error(
                            'Please read and agree to the user agreement'
                          )
                        ),
                },
              ]}
            >
              <Checkbox>
                I have read and agree to the <b>[user agreement]</b> and{' '}
                <b>[privacy terms]</b>
              </Checkbox>
            </Form.Item>

            <Form.Item>
              <Button type="primary" htmlType="submit" block>
                LOGIN
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    );
  }
}
